<template>
  <el-tabs v-model="khkactiveName" @tab-click="khkhandleClick">
    <el-tab-pane label="考核款汇总" name="one">
      <el-row>
        <el-col :span="24">
          <div class="header">
            <el-form ref="pfhzform" :model="khkhzform" label-width="100px" class="flex-start ">
              <el-form-item label="汇总维度">
                <el-select v-model="collectDimensionality" placeholder="请选择汇总维度" style="width:200px">
                  <el-option label="月汇总" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="时间范围" prop="pfhztime">
                <el-date-picker v-model="khkhzform.month" value-format="yyyy-MM" type="month" placeholder="选择月" style="width: 400px;" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="khkhzcx">查询</el-button>
                <el-button @click="khkhzclear">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <elltable ref="multipleTable" :loading="khkhzloading" :data="khkhztableData" :th="khkhzth" :n="3" />
          </div>
        </el-col>

      </el-row>
      <div class="block" style="display: flex; justify-content: flex-end;">
        <pagination :current-page="khkhzform.pageDate.pageNum" :page-size="khkhzform.pageDate.pageSize" :total="khkhztotal" @size-change="khkhzhandleSizeChange" @current-change="khkhzhandleCurrentChange" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="考核款明细" name="two">
      <el-row>
        <el-col :span="24">
          <div class="header">
            <el-form ref="zlform" :model="khkmxform" label-width="100px" class="flex-start ">
              <el-form-item label="单号">
                <el-input v-model="khkmxform.transportCode" placeholder="请输入单号" />
              </el-form-item>
              <el-form-item label="时间范围" prop="zltime">
                <el-date-picker v-model="khkmxform.Time" value-format="yyyy-MM-dd" style="width: 500px;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="khkmxpicker" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="khkmxcx">查询</el-button>
                <elbutton :obj="khkmxform" @dj="khkmxclear" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <elltable ref="multipleTable" :loading="khkmxloading" :data="khkmxtableData" :th="khkmxth" :n="3" />
          </div>
        </el-col>

      </el-row>
      <div class="block" style="display: flex; justify-content: flex-end;">
        <pagination :current-page="khkmxform.pageDate.pageNum" :page-size="khkmxform.pageDate.pageSize" :total="khkmxtotal" @size-change="khkmxhandleSizeChange" @current-change="khkmxhandleCurrentChange" />
      </div>
    </el-tab-pane>
  </el-tabs>

</template>
<script>import { Getkhkhztable, Getkhkmxtable } from '@/api/ReconciliationCenter'
export default {
  data() {
    return {
      khkactiveName: 'one',
      // 考核款汇总
      khkhzth: [],
      khkhztotal: 0,
      collectDimensionality: '2',
      khkhzform: {
        month: '',
        pageDate: {
          pageNum: 1,
          pageSize: 1
        }
      },
      khkhzloading: false,
      khkhztableData: [],
      // 考核款明细
      khkmxth: [],
      khkmxtotal: 0,
      khkmxform: {
        endTime: '',
        pageDate: {
          pageNum: 1,
          pageSize: 1
        },
        startTime: '',
        transportCode: ''
      },
      khkmxloading: false,
      khkmxtableData: []
    }
  },
  methods: {
    khkhandleClick(tab, event) { },
    // 考核款汇总查询
    khkhzcx() {
      if (this.khkhzform.month === '') {
        this.$message('请选择月份')
        return
      }
      this.khkhzonSubmit()
    },
    async khkhzonSubmit() {
      this.khkhzloading = true
      const res = await Getkhkhztable(this.khkhzform)
      this.khkhzloading = false
      console.log('考核款汇总', res)
      if (res.code === 200) {
        this.khkhztableData = res.data.list.data
        this.khkhztotal = res.data.list.total
        this.khkhzth = res.data.fields
      } else {
        this.khkhztableData = []
        this.khkhztotal = 0
      }
    },
    // 考核款汇总分页
    khkhzhandleSizeChange(val) {
      this.khkhzform.pageDate.pageSize = val
      this.khkhzform.pageDate.pageNum = 1
      this.khkhzcx()
    },
    khkhzhandleCurrentChange(val) {
      this.khkhzform.pageDate.pageNum = val
      this.khkhzcx()
    },

    // 考核款明细查询
    khkmxcx() {
      if (this.khkmxform.startTime === '') {
        this.$message('请选择日期')
        return
      }
      this.khkmxonSubmit()
    },
    async khkmxonSubmit() {
      this.khkmxloading = true
      const res = await Getkhkmxtable(this.khkmxform)
      this.khkmxloading = false
      console.log('考核款明细', res)
      if (res.code === 200) {
        this.khkmxtableData = res.data.list.data
        this.khkmxtotal = res.data.list.total
        this.khkmxth = res.data.fields
      } else {
        this.khkmxtableData = []
        this.khkmxtotal = 0
      }
    },
    // 获取派费明细时间
    khkmxpicker(value) {
      this.khkmxform.startTime = value[0]
      this.khkmxform.endTime = value[1]
    },
    // 派费明细分页
    khkmxhandleSizeChange(val) {
      this.khkmxform.pageDate.pageSize = val
      this.khkmxform.pageDate.pageNum = 1
      this.khkmxcx()
    },
    khkmxhandleCurrentChange(val) {
      this.khkmxform.pageDate.pageNum = val
      this.khkmxcx()
    },
    // 重置
    khkhzclear() {
      this.khkhzform.month = ''
    },
    khkmxclear(aaa) {
      this.khkmxform = aaa
    }

  }
}
</script>

<style>
.flex-start {
  display: flex;
}
</style>
